<template>
    <div>
            <h2>message:{{ message }}</h2>
          
            <button @click="change2">修改</button>
            <hr>
            <h2>account:    {{ account.usname }}</h2>
            <h2>account:    {{ account.password }}</h2>
            <button @click="changeaccount">修改账号</button>
            <hr>
            <h2>当前计数：{{ counter }}</h2>
            <button @click="increment">+1</button>
            <hr>
            <h2>info:计数{{ info.counter }}</h2>
            <button @click="info.counter.value++">+1</button>
    </div>
  </template>

  
  <script>
    /* import { forMe } from "@/api/index";*/
    import { reactive, ref } from 'vue';
    export default {
        setup(){
            // 1.定义普通的数据：可以正常的被使用
            //   缺点：数据不是响应式的
            let message = 'HelloWorld'

            const change2 = () =>{
                message = "nihao inzv"
                console.log(message);
            }
            // 2.定义响应式数据
            // 2.1.reactive函数:定义复杂类型的数据
            let account = reactive({
                usname:'inzv',
                password:"123"
            })

            const changeaccount = () =>{
                account.usname = "dsadas"
                console.log(message);
            }
            // 2.2. ref函数： 定义简单类型的数据（也可以定义复杂类型的数据） 
            // counter 定义响应式数据
            const counter = ref(0)
            const increment = () =>{
                counter.value++
            }
            // 2.3. ref是浅层解包
            const info = {
                counter
            }
            return {
                message,
                account,
                change2,
                changeaccount,
                counter,
                increment,
                info
            }
        }
    };
  </script>
    <style  scoped>
    /*局部css 支持css3 可以改变elementUI组件的样式 且组件样式调整只在本页面生效**/
    /*主样式*/
  </style>
